<!--
 * @Description:固定导航栏.html
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-20 22:13:46
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>固定导航栏.html</title>
	<style>
		* {
			margin: 0;
			padding: 0
		}
		img{
			vertical-align: top;
			width: 100%;
			height: 400px;
		}
		.main{
			margin: 0 auto;
			width: 1000px;
			margin-top: 10px;
		}
		body {
			height: 3000px;
		}
		.fixed{
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	</style>

</head>

<body>
	<div>
		document.body.scrollTop||document.documentElement.scrollTop <br>
		document.title=window.pageYOffset
	</div>
	<div class="top" id="top">
		<img src="./img/1.jpg" id="m1">
	</div>
	<div class="nav" id="nav">
		<img src="./img/2.jpg" id="m1">
	</div>
	<div class="main">
		<img src="./img/3.jpg" alt="">
	</div>
		<script>
			function $(id) {
				return document.getElementById(id);
			}

			function scroll() {
				if (window.pageYOffset != null) { //ie9+
					return {
						left: window.pageXOffset,
						top: window.pageYOffset
					}
				} else if (document.compatMode == "CSS1Compat") { //不是怪异模式浏览器 <!DOCTYPE html>
					return {
						left: document.documentElement.scrollLeft,
						top: document.documentElement.scrollTop
					}
				} else { //怪异模式浏览器
					return {
						left: document.body.scrollLeft,
						top: document.body.scrollTop
					}
				}
			}

	window.onload = function () {
			var nav = $("nav")
			var navTop = nav.offsetTop
			window.onscroll = function () {
				if(scroll().top>=navTop){
					nav.className="nav fixed"
				}else{
					nav.className="nav"
				}
			}

	}
		</script>

</body>

</html>